<template>
	<view>
		<!-- 弹窗 -->
		<!-- <uni-popup ref="popupRef" type="bottom" borderRadius="10px 10px 0 0" background-color="#fff" mask-background-color="rgba(0,0,0,0)"> -->
		<uni-popup ref="popupRef" type="bottom" background-color="#eee">
			<view class="flex mt-2 justify-around">
				<view @click="keyboardChange(1)" class="key flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">1</view>
				<view @click="keyboardChange(2)" class="key flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">2</view>
				<view @click="keyboardChange(3)" class="key flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">3</view>
				<view @click="keyboardChange('del')" class="key flex align-center justify-center bg-white rounded-radius text-060606 pt-1 pb-1">
					<image class="font-weight-bold" mode="widthFix" src="data:image/svg+xml,%3Csvg t=%221739497267572%22 class=%22icon%22 viewBox=%220 0 1411 1024%22 version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 p-id=%2212684%22 width=%22200%22 height=%22200%22%3E%3Cpath d=%22M470.49 0h830.27a110.7 110.7 0 0 1 110.7 110.7v802.59a110.7 110.7 0 0 1-110.7 110.7H470.49L0 525.84 470.49 0z m27.23 60.89L82.69 524.73l414.03 438.38H1300.76a49.82 49.82 0 0 0 49.82-49.82V110.7A49.82 49.82 0 0 0 1300.76 60.89H497.72z%22 fill=%22%23060606%22 p-id=%2212685%22%3E%3C/path%3E%3Cpath d=%22M871.78 472.87l207.57-207.57L1118.48 304.43l-207.57 207.57 207.57 207.57L1079.35 758.7l-207.57-207.57-207.57 207.57L625.08 719.57l207.57-207.57-207.57-207.57L664.22 265.3l207.57 207.57z%22 fill=%22%23060606%22 p-id=%2212686%22%3E%3C/path%3E%3C/svg%3E"></image>
				</view>
			</view>
			<view class="flex justify-around">
				<view>
					<view @click="keyboardChange(4)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">4</view>
					<view @click="keyboardChange(7)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">7</view>
				</view>
				<view>
					<view @click="keyboardChange(5)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">5</view>
					<view @click="keyboardChange(8)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">8</view>
				</view>
				<view>
					<view @click="keyboardChange(6)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">6</view>
					<view @click="keyboardChange(9)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">9</view>
				</view>
				<view @click="keyboardChange(0)" class="key mt-2 flex align-center justify-center bg-white rounded-radius text-060606 font-weight-bold font-md-l pt-1 pb-1">0</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup name="keyborad">
	import {
		ref,
		defineEmits
	} from 'vue'
	const emit = defineEmits(["keyboardChange"])
	const popupRef = ref(null);

	function show() {
		popupRef.value.open()
	}
	function close() {
		popupRef.value.close()
	}
	
	function keyboardChange(e) {
		uni.vibrateShort()
		emit('keyboardChange', e)
	}
	defineExpose({
		show
	})
</script>

<style lang="scss" scoped>
	.flex{
		>view{
			width: 23%;
			image{
				width: 30%
			}
		}
	}
	.key:active{
		background: #ccc!important;	
	}
</style>